<template>
  <div class="white">
    <div class="list-form">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部商品" name="1" />
        <el-tab-pane label="在售商品" name="2" />
        <el-tab-pane label="待售商品" name="3" />
      </el-tabs>
      <el-form :model="form">
        <el-row>
          <el-col span="8">
            <el-form-item label="商品分类">
              <el-select
                v-model="form.price_option"
                class="select"
              >
                <el-option label="全部" :value="1" />
                <el-option label="已投放" :value="2" />
                <el-option label="投放/退出失败" :value="2" />
                <el-option label="处理中" :value="2" />
                <el-option label="平台审核中" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="商品分类">
              <el-select
                v-model="form.price_option"
                class="select"
              >
                <el-option label="全部" :value="1" />
                <el-option label="已投放" :value="2" />
                <el-option label="投放/退出失败" :value="2" />
                <el-option label="处理中" :value="2" />
                <el-option label="平台审核中" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="商品分类">
              <el-select
                v-model="form.price_option"
                class="select"
              >
                <el-option label="全部" :value="1" />
                <el-option label="已投放" :value="2" />
                <el-option label="投放/退出失败" :value="2" />
                <el-option label="处理中" :value="2" />
                <el-option label="平台审核中" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="8">
            <el-form-item label="商品分类">
              <el-select
                v-model="form.price_option"
                class="select"
              >
                <el-option label="全部" :value="1" />
                <el-option label="已投放" :value="2" />
                <el-option label="投放/退出失败" :value="2" />
                <el-option label="处理中" :value="2" />
                <el-option label="平台审核中" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="16">
            <el-button style="float: right;">123123</el-button>
            <el-button style="float: right;">123123</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-button>123123</el-button>
          <el-button>123123</el-button>
          <el-button>123123</el-button>
        </el-row>
      </el-form>
      <el-table>
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="水印信息"
        />
        <el-table-column
          prop="name"
          label="水印图片"
          width="238"
        />
        <el-table-column
          prop="name"
          label="投放状态"
          width="330"
        />
        <el-table-column
          fixed="right"
          prop="name"
          label="操作"
          width="230"
        >
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <div class="">编辑</div>
            <div class="">退出/投放记录</div>
            <div class="">追加投放</div>
            <el-popover
              placement="top-start"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <div slot="reference" class="">
                <div class="">退出并删除水印模板</div>
                <div class="">退出水印(保留模板)</div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="">
        <el-pagination
          style="float: right;"
          background
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Video',
  data() {
    return {
      form: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.white {
  padding: 12px 20px 0;
  .list-form,
  .list-table {
    padding: 20px 20px 0;
    border-radius: 4px 4px 0 0;
  }
  .select {
    width: 260px;
  }
}
</style>
